<template>
  <div>
    <i v-if="loading" class="el-icon-loading" />
    <el-checkbox-group v-if="wflowList.length>0 " v-model="selected" class="wf-names-checkbox" :disabled="canEdit===0" @change="handleChange">
      <el-checkbox v-for="wflow in wflowList" :key="wflow.id" :title="wflow.name" :label="wflow.value">{{ wflow.name }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>

import { addClass, removeClass } from '@/global/utils/index'

export default {
    name: 'WfNames',
    components: {

    },
    props: {
        valueField: { type: String, default: function() { return 'name' } },
        vo: { type: Object, default: function() { return { } } },
        change: { type: Function, default: function() {} },
        canEdit: { type: Number, default: 1 },
        orgCode: { type: String, default: null }
    },
    data() {
        return {
            loading: true,
            wflowList: [],
            selected: ''.split(','),
            moduleInfo: {
                queryWfDataUrl: 'workflow/wfdProcessMgr/queryValidProcess' // 流程接口，获取统计文件类型数量
            }
        }
    },
    computed: {
        curUser() {
            return this.$store.getters.loginUser
        }
    },
    watch: {

    },
    created() {

    },
    beforeDestroy() {

    },
    mounted() {
        this.getWflowList()
    },
    methods: {
        getWflowList() {
            this.loading = true

            let sysCode = this.curUser.sysCode
            if (this.$vnode.context.$vnode.context.wfInstance) {
                sysCode = this.$vnode.context.$vnode.context.wfInstance.sysCode
            } else if (this.vo && this.vo.sysCode) {
                sysCode = this.vo.sysCode
            }

            const params = { 'sysCode': sysCode }

            if (this.orgCode !== undefined && this.orgCode !== null) {
                params.orgCode = this.orgCode
            }

            this.$http({
                method: 'POST',
                contentType: 'application/x-www-form-urlencoded',
                params: params,
                url: this.moduleInfo.queryWfDataUrl
            }).then(response => {
                if (response.code === 'success') {
                    let wflowInfo = ''
                    response.body.listdata.forEach(wflow => {
                        if (this.valueField === 'processNo' && wflowInfo.indexOf(wflow.processNo + ',') === -1) {
                            // value-field==='process'：选择流程编码（常用意见、外出授权）
                            this.wflowList.push({ 'id': wflow.id, 'value': wflow.processNo, 'name': wflow.name })
                            wflowInfo += wflow.processNo + ','
                        } else if (this.valueField === 'name' && wflowInfo.indexOf(wflow.name + ',') === -1) {
                            // value-field==='process'：选择流程名称（办文提醒）
                            this.wflowList.push({ 'id': wflow.id, 'value': wflow.name, 'name': wflow.name })
                            wflowInfo += wflow.name + ','
                        }
                    })

                    if (this.vo.wfName === undefined || this.vo.wfName === null) {
                        this.selected = []
                    } else if (typeof this.vo.wfName === 'string') {
                        this.selected = this.vo.wfName.split(',')
                    }
                } else {
                    this.$message.error(response.message)
                }

                this.loading = false
            })
        },
        handleChange(newValue) {
            this.$set(this.vo, 'wfName', newValue.join(','))
            if (newValue !== null) {
                removeClass(this.$el, '.invalid-field')
            } else {
                addClass(this.$el, '.invalid-field')
            }
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .wf-names-checkbox{
    .el-checkbox {
        .el-checkbox__label{
            width: 110px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: bottom;
        }
    }
}
</style>
